<template>
  <div class='list-common-table'>
    <t-form
      ref='form'
      :data='formData'
      :label-width='80'
      colon
      @reset='onReset'
      @submit='onSubmit'
      :style="{ marginBottom: '8px' }"
    >
      <t-row>
        <t-col :span='10'>
          <t-row :gutter='[16, 24]'>
            <t-col :flex='1'>
              <t-form-item label='领养人名称' name='name'>
                <t-input
                  v-model='formData.name'
                  class='form-item-content'
                  type='search'
                  placeholder='请输入领养人名称'
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
            <t-col :flex='1'>
              <t-form-item label='领养状态' name='status'>
                <t-select
                  v-model='formData.status'
                  class='form-item-content`'
                  :options='CONTRACT_STATUS_OPTIONS'
                  placeholder='请选择领养状态'
                />
              </t-form-item>
            </t-col>
            <t-col :flex='1'>
              <t-form-item label='审核编号' name='no'>
                <t-input
                  v-model='formData.no'
                  class='form-item-content'
                  placeholder='请输入审核编号'
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col :span='2' class='operation-container'>
          <t-button theme='primary' type='submit' :style="{ marginLeft: '8px' }"> 查询</t-button>
          <t-button type='reset' variant='base' theme='default'> 重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class='table-container'>
      <t-table
        :data='data'
        :columns='columns'
        :rowKey='rowKey'
        :verticalAlign='verticalAlign'
        :hover='hover'
        :pagination='pagination'
        @page-change='rehandlePageChange'
        @change='rehandleChange'
        :loading='dataLoading'
        :headerAffixedTop='true'
        :headerAffixProps='{ offsetTop, container: getContainer }'
      >
        <template #status='{ row }'>
          <t-tag v-if='row.status === CONTRACT_STATUS.FAIL' theme='danger' variant='light-outline'>审核未通过</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.AUDIT_PENDING' theme='warning' variant='light-outline'>待审核</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.EXEC_PENDING' theme='warning' variant='light-outline'>待审核</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.EXECUTING' theme='success' variant='light-outline'>审核通过</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.FINISH' theme='success' variant='light-outline'>审核通过</t-tag>
        </template>
        <template #op='slotProps'>
          <a class='t-button-link' @click='gotoDetail(slotProps)'>详细信息</a>
          <a class='t-button-link' @click='rehandleClickOp(slotProps)'>操作</a>
          <a class='t-button-link' @click='handleClickDelete(slotProps)'>删除</a>
        </template>
      </t-table>
      <t-dialog
        header='确认删除当前所选申请？'
        :body='confirmBody'
        :visible.sync='confirmVisible'
        @confirm='onConfirmDelete'
        :onCancel='onCancel'
      >
      </t-dialog>

      <!-- 申请人管理弹窗 -->
      <t-dialog header='管理申请' :visible.sync='formVisible' :width='680' :footer='false'>
        <div slot='body'>
          <!-- 表单内容 -->
          <t-form :data='formData' ref='form' @submit='onSubmit' :rules='FORM_RULES' :labelWidth='100'>
            <t-form-item label='申请人名称' name='applicant'>
              <t-input :style="{ width: '480px' }" :disabled='true' v-model='formData.applicant' placeholder='申请人名称'></t-input>
            </t-form-item>
            <t-form-item label='审核描述' name='description'>
              <t-textarea :style="{ width: '480px' }" v-model='formData.description' placeholder='审核通过/不通过的原因'></t-textarea>
            </t-form-item>
            <t-form-item label='备注' name='remark'>
              <t-textarea :style="{ width: '480px' }" v-model='formData.remark' placeholder='备注' name='description'>
              </t-textarea>
            </t-form-item>
            <t-form-item label='审核状态' name='status'>
              <t-radio-group v-model='formData.status'>
                <t-radio value='0'>通过</t-radio>
                <t-radio value='1'>未通过</t-radio>
              </t-radio-group>
            </t-form-item>
            <t-form-item style='float: right'>
              <t-button variant='outline' @click='formVisible = false'>取消</t-button>
              <t-button theme='primary' type='submit'>确定</t-button>
            </t-form-item>
          </t-form>
        </div>
      </t-dialog>
    </div>
  </div>
</template>
<script>
import { prefix } from '@/config/global'
import Trend from '@/components/trend/index.vue'

import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_TYPE_OPTIONS,
  CONTRACT_PAYMENT_TYPES
} from '@/constants'

const FORM_RULES = {
  applicant: [{required: true, message: '必填', type: 'error'}],
  description: [{required: true, email: true, message: '必填', type: 'error'}],
  remark: [{required: true, message: '必填', type: 'error'}],
  status: [{required: true, message: '必填', type: 'error'}]
}

export default {
  name: 'list-table',
  components: {
    Trend
  },
  data () {
    return {
      FORM_RULES,
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_TYPE_OPTIONS,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      formData: {
        applicant: '',
        remark: '',
        no: undefined,
        status: undefined
      },
      data: [
        {
          'index': 1,
          'status': 3,
          'no': 'BH0019',
          'name': '宋强',
        },
        {
          'index': 2,
          'status': 1,
          'no': 'BH0011',
          'name': '陈奕凌',
        },
        {
          'index': 3,
          'status': 0,
          'no': 'BH0042',
          'name': '黄佳怡',
        },
        {
          'index': 4,
          'status': 0,
          'no': 'BH0091',
          'name': '陈凌任',
        },
        {
          'index': 5,
          'status': 4,
          'no': 'BH0017',
          'name': '苏凌峰',
        },
        {
          'index': 6,
          'status': 1,
          'no': 'BH005',
          'name': '谢青峰',
        },
        {
          'index': 7,
          'status': 2,
          'no': 'BH0087',
          'name': '张维纶',
        },
        {
          'index': 8,
          'status': 1,
          'no': 'BH0095',
          'name': '罗秉欣',
        },
        {
          'index': 9,
          'status': 4,
          'no': 'BH0057',
          'name': '陈科飞',
        },
        {
          'index': 10,
          'status': 4,
          'no': 'BH0016',
          'name': '黄小丽',
        },
        {
          'index': 11,
          'status': 3,
          'no': 'BH0074',
          'name': '赵金柱',
        },
        {
          'index': 12,
          'status': 3,
          'no': 'BH0028',
          'name': '吴间道',
        },
        {
          'index': 13,
          'status': 1,
          'no': 'BH0069',
          'name': '谢灵巧',
        },
        {
          'index': 14,
          'status': 3,
          'no': 'BH0094',
          'name': '陈萍萍',
        },
        {
          'index': 15,
          'status': 2,
          'no': 'BH0037',
          'name': '黄丽莉',
        }
      ],
      dataLoading: false,
      formVisible: false,
      value: 'first',
      columns: [
        {title: '领养人名称', fixed: 'left', width: 200, align: 'left', ellipsis: true, colKey: 'name'},
        {title: '领养状态', colKey: 'status', width: 200, cell: {col: 'status'}},
        {title: '审核编号', width: 200, ellipsis: true, colKey: 'no'},
        {align: 'left', fixed: 'right', width: 200, colKey: 'op', title: '操作'}
      ],
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      bordered: true,
      hover: true,
      rowClassName: (rowKey) => `${ rowKey }-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 10,
        total: 15,
        defaultCurrent: 1
      },
      confirmVisible: false,
      deleteIdx: -1
    }
  },
  computed: {
    confirmBody () {
      if (this.deleteIdx > -1) {
        const {name} = this.data?.[this.deleteIdx]
        return `删除后，${ name } 的所有申请信息将被清空，且无法恢复`
      }
      return ''
    },
    offsetTop () {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0
    }
  },
  mounted () {
  },
  methods: {
    getContainer () {
      return document.querySelector('.tdesign-starter-layout')
    },
    onReset (data) {
      console.log(data)
    },
    onSubmit (data) {
      this.$message.success('操作成功')
      this.formVisible = false
      console.log('操作成功', data)
    },
    rehandlePageChange (curr, pageInfo) {
      console.log('分页变化', curr, pageInfo)
    },
    rehandleChange (changeParams, triggerAndData) {
      console.log('统一Change', changeParams, triggerAndData)
    },
    rehandleClickOp ({text, row}) {
      this.formVisible = true
      this.formData.applicant = row.adminName
      console.log(text, row)
    },
    gotoDetail ({text, row}) {
      this.$router.push('/adopt/adoptInfo-online')
      console.log(text, row)
    },
    handleClickDelete (row) {
      this.deleteIdx = row.rowIndex
      this.confirmVisible = true
    },
    onConfirmDelete () {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1)
      this.pagination.total = this.data.length
      this.confirmVisible = false
      this.$message.success('删除成功')
      this.resetIdx()
    },
    onCancel () {
      this.resetIdx()
    },
    resetIdx () {
      this.deleteIdx = -1
    }
  }
}
</script>

<style lang='less' scoped>
@import '@/style/variables.less';

.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: 30px 32px;
  border-radius: var(--td-radius-default);
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
</style>
